<template>
  <a
    href="javascript:;"
    class="icon collectionbutton"
    :class="item.isCollection ? 'on' : ''"
    @click="collectionClickHandle"
    :title="this.$t('lang.收藏')"
  >
    <span
      :class="item.isCollection ? 'icon-favorite-filling' : 'icon-favorite'"
    ></span>
  </a>
</template>
<script>
export default {
  name: "CollectionButton",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return { isCollection: false };
  },
  methods: {
    collectionClickHandle(e) {
      if (this.isCollection) {
        this.isCollection = false;
      } else {
        this.isCollection = true;
      }
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.collectionbutton {
  &.on {
  }
}
</style>
